<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>精美个人信息提交表单</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        form {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 90%;
            max-width: 400px;
        }
        label {
            font-weight: bold;
            margin-bottom: 5px;
            display: block;
        }
        input, textarea {
            width: 100%;
            padding: 12px 10px;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            outline: none;
            transition: all 0.3s ease;
        }
        input:focus, textarea:focus {
            border-color: #007bff;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
        }
        button {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 5px;
            background-color: #007bff;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        button:hover {
            background-color: #0056b3;
        }
        .occupation-choice {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .custom-radio {
            position: relative;
            display: inline-block;
            padding-left: 30px;
            cursor: pointer;
            font-size: 16px;
            user-select: none;
        }
        .custom-radio input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 20px;
            width: 20px;
            background-color: #eee;
            border-radius: 50%;
        }
        .custom-radio:hover input ~ .checkmark {
            background-color: #ccc;
        }
        .custom-radio input:checked ~ .checkmark {
            background-color: #007bff;
        }
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }
        .custom-radio input:checked ~ .checkmark:after {
            display: block;
        }
        .custom-radio .checkmark:after {
           	top: 6px;
           	left: 6px;
           	width: 8px;
           	height: 8px;
           	border-radius: 50%;
           	background: white;
        }
    </style>
</head>
<body>

<form action="/your-server-side-handler" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required>

    <label for="phone">手机号码:</label>
    <input type="tel" id="phone" name="phone" pattern="[0-9]{11}" required placeholder="请输入11位数字">

    <label for="hobby">爱好:</label>
    <textarea id="hobby" name="hobby" rows="4"></textarea>

    <label for="address">住址:</label>
    <input type="text" id="address" name="address" required>
    <label for="occupation">职业:</label>
    <div class="occupation-choice">
        <div class="custom-radio">
            <input type="radio" id="teacher" name="occupation" value="教师" required>
            <label for="teacher">教师</label>
            <span class="checkmark"></span>
        </div>
        <div class="custom-radio">
            <input type="radio" id="staff" name="occupation" value="职员">
            <label for="staff">职员</label>
            <span class="checkmark"></span>
        </div>
        <div class="custom-radio">
            <input type="radio" id="engineer" name="occupation" value="工程师">
            <label for="engineer">工程师</label>
            <span class="checkmark"></span>
        </div>
    </div>

    <button type="submit">提交</button>
</form>

</body>
</html>